<template>
    <button class="hq-button" :class="className" :style="isround" @click="emitClick($event)" @mouseenter="emitEnter($event)">
        <i :class="icon" v-if="icon"></i>
        <slot>{{title}}</slot>
    </button>
</template>

<script>
export default {
    name: 'hq-button',
    data () {
        return {
        }
    },
    props: {
        title: { // 组件显示的文字
            type: String,
            default: () => {
                return 'button';
            }
        },
        icon: { // 组件显示的图标（可选）
            type: String,
            default: () => {
                return '';
            }
        },
        type: { // 组件类型，（可选）主要是背景色的不同（可选值："primary", "danger")
            type: String,
            default: () => {
                return 'default';
            }
        },
        size: { // 组件的大小  （可选）（可选值："normal", "small",  "large")
            type: String,
            default: () => {
                return 'normal';
            }
        },
        round: { // 组件的大小  （可选）（可选值："normal", "small",  "large")
            type: String,
            default: "round"
        },
        plain: { // 组件的大小  （可选）（可选值："normal", "small",  "large")
            type: String,
            default: "plain"
        },
    },
    methods: {
        emitClick(e) {
            e.stopPropagation();
            this.$emit('click')
        },
        emitEnter(e) {
            e.stopPropagation();
            this.$emit('mouseenter')
        }
    },
    computed: {
        className () {
            return this.type + ' ' + this.size + ' ' + this.isPlain;
        },
        isround () {
            return this.round === "" ? { "border-radius": this.borderValue + 'px' } : {}
        },
        isPlain () {
            return this.plain === "" ? "plain" : ""
        },
        borderValue () {
            switch (this.size) {
                case "small":
                    return 14
                case "medium":
                    return 16
                case "large":
                    return 20
                default:
                    return 18
            }
        }

    }
}
</script>

<style lang="less">
@import './variable.less';

@import './mixin.less';

.hq-button {
    outline: none;
    background-color: #fff;
    color: #333;
    border: 1px solid #eee;
    text-align: center;
    border-radius: 4px;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    i {
        margin: 0 4px;
    }
    &.default {
        background-color: #fff;
        &:hover {
            color: #4091ff;
            background-color: #ecf5ff;
            &.plain {
                border-color: #3a8ee6;
                background-color: #fff;
            }
        }
        &:active {
            &.plain {
                color: #3a8ee6;
            }
            border-color: #3a8ee6;
        }
    }
    &.large {
        height: 40px;
        line-height: 36px;
        font-size: 14px;
        width: 104px;
    }
    &.normal {
        height: 36px;
        line-height: 32px;
        font-size: 14px;
        width: 98px;
    }
    &.medium {
        height: 32px;
        line-height: 28px;
        font-size: 14px;
        width: 80px;
    }
    &.small {
        height: 28px;
        line-height: 24px;
        font-size: 12px;
        width: 80px;
    }
    each(@selectors, {
        @str: replace(@key, "@", '');
        &.@{str} {
            background-color: @value[default];
            color: #fff;
            each(@value, {
                    @str1: e('&:@{key}');
                    @{str1} {
                        .output(@key,@value);
                    }
                }

            );
        }
    });
    each(@selectors-plain, {
        @str: replace(@key, "@", '');
        &.@{str} {
            &.plain {
                background-color: @value[default];
                color:@value[hover];
                border:1px solid @value[hover];
                each(@value, {
                            @str1: e('&:@{key}');
                            @{str1} {
                                .output-plain(@key,@value);
                            }
                        }

                    );
                }
            }

    });
}
</style>
